<template>
	<view class="show_teacher">
		<view class="dec">
			<image src="../../static/appiont/xing.png"></image>
		</view>
		<view class="item">
			<view class="teacher_i">
				<view class="teacher_img">
					<image
						src="https://tse1-mm.cn.bing.net/th/id/R-C.52ef34b08a0bd6af430c0e4c291e503a?rik=nVtRSsjF63E9hw&riu=http%3a%2f%2fimg.duoziwang.com%2f2018%2f17%2f05241946706393.jpg&ehk=CNBIeCTeQ8aB2hvw0oBRn8LJyR%2bjJ8vxrhhtHvRTwzU%3d&risl=&pid=ImgRaw&r=0">
					</image>
					<view class="dianz">
						<u-icon name="thumb-up" color="#E95D22" size="30rpx">
						</u-icon>
						<text>{{teacher.tuijian}}人推荐</text>
					</view>
				</view>
			</view>
			<view class="teacher_info">
				<span class="uname">{{teacher.name}}老师</span>
				<view class="mid_des">
					<view class="classfiyleft">
						<u-icon name="tags" color="#E95D22" size="30rpx"></u-icon>类别:<span>{{teacher.classfi}}</span>
					</view>
					<view class="classfiyright">
						<u-icon name="chat" color="#E95D22" size="30rpx"></u-icon>方式:<span>{{teacher.method}}</span>
					</view>
					<view class="make_time">
						<u-icon name="bell" color="#E95D22" size="30rpx"></u-icon>可预约时间:<span>{{teacher.time}}</span>
					</view>
				</view>
				<view class="pop_des">
					<button @click="goto_appointment(teacher)" class="buton">点击预约</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: ['teacher'],
		name: 'des_teacher',
		data() {
			return { show: false }
		},
		methods: {
			goto_appointment(e) {
				uni.setStorage({
					key: 'teacher',
					data: e,
					success: () => {
						uni.navigateTo({ url: '../../pages/select_time/select_time' })
					}
				})
			}
		},
	}
</script>

<style lang="less">
	.show_teacher {
		width: 100%;
		min-height: 300rpx;
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 1px #19be6b solid;
		border-radius: 10px;
		box-shadow: 1px 1px 1px 1px lightgray;
		position: relative;
		transition: transform 3s;
		transform-style: preserve-3d;
		.dec {
			width: 120rpx;
			height: 120rpx;
			top: -4vh;
			left: -4rpx;
			position: absolute;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.teacher_i {
				width: 200rpx;
				margin-right: 35rpx;
				.teacher_img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
					overflow: hidden;
					border: 1px pink solid;
					box-shadow: 1px 1px 1px 1px lightgray;

					image {
						width: 100%;
						height: 100%;
					}

					.dianz {
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						margin-left: 40rpx;

						text {
							font-size: 25rpx;
						}
					}
				}
			}

			.teacher_info {
				width: 500rpx;
				min-height: 210rpx;
				.pop_des {
					position: relative;
					top: 20rpx;
					.buton {
						display: flex;
						justify-content: center;
						align-items: center;
						overflow: hidden;
						width: 180rpx;
						height: 60rpx;
						border-radius: 5px;
						font-size: 25rpx;
						box-shadow: 1px 1px 1px 1px lightgray;
						margin-bottom: 10rpx;
					}
				}

				.uname {
					display: flex;
					margin-top: 10rpx;
					justify-content: center;
				}

				.mid_des {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					.make_time {
						width: 100%;
						margin-left: 20rpx;
						display: flex;
						margin-top: 30rpx;
						font-size: 25rpx;
					}

					.classfiyleft {
						width: 220rpx;
						display: flex;
						margin-top: 30rpx;
						font-size: 25rpx;
						justify-content: center;
						align-items: center;

						span {
							font-size: 25rpx;
						}
					}

					.classfiyright {
						width: 250rpx;
						display: flex;
						margin-top: 30rpx;
						font-size: 25rpx;
						justify-content: center;
						align-items: center;

						span {
							font-size: 25rpx;
						}
					}

				}

			}
		}
	}
</style>
